<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../css/style.css">

    <style type="text/css">
/*      商品多属性查询  */
        ::-webkit-scrollbar {display:none}
        .select{padding:5px 10px;border:#ddd 1px solid;border-radius:4px;width:100%;margin:2% auto;font-size:12px}
        .select li{list-style:none;padding:10px 0 5px 100px}
        .select .select-list{border-bottom:#eee 1px dashed}
        .select dl{zoom:1;position:relative;line-height:24px;}
        .select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
        .select dt{width:100px;margin-bottom:5px;position:absolute;top:0;left:-100px;text-align:right;color:#666;height:24px;line-height:24px}
        .select dd{float:left;display:inline;margin:0 0 5px 5px;}
        .select a{display:inline-block;white-space:nowrap;height:24px;padding:0 10px;text-decoration:none;color:#039;border-radius:2px;}
        .select a:hover{color:#337ab7;background-color:#c7ddef}
        .select .selected a{color:#fff;background-color: #337ab7
        }
        .select-result dt{font-weight:bold}
        .select-no{color:#999}
        .select .select-result a{padding-right:20px;background:#337ab7 url("images/close.gif") right 9px no-repeat}
        .select .select-result a:hover{background-position:right -15px}

    /*    侧面小广告*/
        body{height:2000px}
        .fixediv{position:fixed;top:30px;z-index:9999;width:259px;height:194px;background:#ddd;}
        .fixediv img{float:left;}
        .fixediv a.close{display:block;height:30px;line-height:30px;background:#fff;font-size:14px;padding:0 10px;color:#5e5e5e;text-decoration:none;text-align:center;}
        .leftadv{left:0px;}
        .rightadv{right:0px;}
    </style>
</head>

<body class="container" >

<div class="demo">
<!--小广告开始-->
    <div class="fixediv leftadv">
        <a href="https://www.renrenche.com/?fr=bd_pz&tg_aid=10055728"><img src="../../images/280.jpg" width="259" height="194" alt="人人车" /></a>
        <a class="close" href="javascript:void(0);">关闭广告</a>
    </div>
    <div class="fixediv rightadv">
        <a href="https://tj.58.com/"><img src="../../images/180.jpg" width="259" height="194" alt="58同城" /></a>
        <a class="close" href="javascript:void(0);">关闭广告</a>
    </div>
<!--    小广告结束-->
<!--    商品分类开始-->
    <ul class="select" id="ul_select">
        <li class="select-list">
            <dl id="select1" class="dl">
                <dt>级别</dt>
                <dd class="select-all selected"><a href="#">全部</a></dd>
                <dd><a href="#">新能源</a></dd>
                <dd><a href="#">微型</a></dd>
                <dd><a href="#">小型</a></dd>
                <dd><a href="#">紧凑型</a></dd>
                <dd><a href="#">中型</a></dd>
                <dd><a href="#">中大型</a></dd>
                <dd><a href="#">SUV</a></dd>
                <dd><a href="#">MPV</a></dd>
                <dd><a href="#">跑车</a></dd>
            </dl>
        </li>
        <li class="select-list">
            <dl id="select2" class="dl">
                <dt>车系</dt>
                <dd class="select-all selected"><a href="#">全部</a></dd>
                <dd><a href="#">奔驰</a></dd>
                <dd><a href="#">宝马</a></dd>
                <dd><a href="#">奥迪</a></dd>
                <dd><a href="#">保时捷</a></dd>
                <dd><a href="#">欧宝</a></dd>
                <dd><a href="#">宝沃</a></dd>
                <dd><a href="#">卡尔森</a></dd>
                <dd><a href="#">巴博斯</a></dd>
                <dd><a href="#">迈莎锐</a></dd>
                <dd><a href="#">斯柯达</a></dd>
            </dl>
        </li>
        <li class="select-list">
            <dl id="select3" class="dl">
                <dt>价格</dt>
                <dd class="select-all selected"><a href="#">全部</a></dd>
                <dd><a href="#">10万以下</a></dd>
                <dd><a href="#">10万-20万</a></dd>
                <dd><a href="#">20万-50万</a></dd>
                <dd><a href="#">50万-100万</a></dd>
                <dd><a href="#">100万以上</a></dd>
            </dl>
        </li>
        <li class="select-result">
            <dl id="dl_result">
                <dt>已选条件：</dt>
                <dd class="select-no">暂时没有选择过滤条件</dd>
            </dl>
        </li>
    </ul>
<!--商品分类结束-->
</div>

<div class="row" style="margin-top: 30px;" id="com"></div>

<!--插件js-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#ul_select").find(".dl").children("dd").click(function() { //每个商品分类行绑定点击事件
            $(this).addClass("selected").siblings("dd").removeClass("selected"); //当前元素选中，其余删除选中样式
            var index = $(this).parents(".select-list").index();//获取父级索引index
            var goods = $(this).children("a").text();//获取当前商品名称
            $("#select_" + index).remove();//删除当前索引的筛选
            if (goods != '全部') { //若不是全部 在筛选区域添加商品
                $("#dl_result").append("<dd id='select_" + index + "' class='selected' onclick=removeChose($(this),'" + index + "')><a href='#'>" + goods + "</a></dd>");
            }
            getResult();
        })
    });
    function removeChose(obj, index) { //删除筛选
        $("#ul_select").children(".select-list").eq(index).find(".selected").removeClass("selected");//删除商品选中样式
        $("#ul_select").children(".select-list").eq(index).find("dd").eq(0).addClass("selected");//给全部添加选中样式
        obj.remove();//当前按钮删除
        getResult();
    }
    function getResult() { //结果处理
        var len_chose = $("#dl_result").children(".selected").length;
        if (len_chose > 0) { //若是筛选区域选中项大于0
            $(".select-no").hide();//暂时没有选择过滤条件 隐藏
        } else {
            $(".select-no").show();//暂时没有选择过滤条件 显示
        }
    }
</script>
<script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".fixediv a").click(function() { //关闭广告
            $(".fixediv").fadeOut(400);
        });
        $(".fixediv").floatadv();//广告浮动
    });
    jQuery.fn.floatadv = function(loaded) { //floatadv插件封装
        var obj = this;
        body_height = parseInt($(window).height());
        block_height = parseInt(obj.height());
        top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
        if (body_height < block_height) {
            top_position = 0 + $(window).scrollTop();
        }
        if (!loaded) {
            obj.css({'position': 'absolute'});
            obj.css({'top': top_position});
            $(window).bind('resize', function() {
                obj.floatadv(!loaded);
            });
            $(window).bind('scroll', function() {
                obj.floatadv(!loaded);
            });
        } else {
            obj.stop();
            obj.css({'position': 'absolute'});
            obj.animate({'top': top_position}, 400, 'linear');
        }
    }
</script>
<script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script>

<!--查询数据库数据-->
<script>
var html = "",c_type,c_brand,c_min_price,c_max_price;
$(document).ready(function () {
    selectAll();
    //查询全部商品
    function  selectAll() {
        html="";
        $.ajax({
            url: "../../car/selectInventory",
            type: "get",
            dataType: "json",
            // async:false,//同步方法，确保获取到id在加载其他方法
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    html += "<div class=\"col-md-3\" style=\"margin-bottom: 25px\">\n" +
                        "    <div class=\"col-md-offset-2\">\n" +
                        "        <img class='gotoByCar' id='"+result[i].c_id+"' src=\\" + result[i].c_surface + " height=\"162\" width=\"216\">\n" +
                        "    </div>\n" +
                        "    <div class=\"col-md-offset-2\" style=\"font-family: '微软雅黑 Light'\">\n" +
                        "        <div style=\"font-size: large\">\n" +
                        "            <label >" + result[i].c_name + "</label><br>\n" +
                        "        </div>\n" +
                        "        <div class=\"row\" style=\"font-size: smaller\">\n" +
                        "            <div class=\"col-md-5\" style=\"color: cornflowerblue\">\n" +
                        "                <label>￥" + result[i].c_price + "万</label>\n" +
                        "            </div>\n" +
                        "            <div class=\"col-lg-push-5\" style=\"color: darkgrey\">\n" +
                        "                <label color=\"grey\">月供￥" + (result[i].c_price / 12).toFixed(2) + "万起</label>\n" +
                        "            </div>\n" +
                        "        </div>\n" +
                        "    </div>\n" +
                        "</div>";
                }
                $("#com").html(html)
            }
        })
    }

    $(document).on("click",".gotoByCar",function () {
        var id=$(this).attr("id");
        sessionStorage.setItem("c_id",id);
        $(location).attr("href","/gotoyhBuyByCar")
    })

    // $(".gotoByCar").click(function () {
    //     $(location).attr("href","yhBuyByCar.html");
    // })



    $(function () {
        $("#ul_select").find(".dl").children("dd").click(function () {

            if ($(this).parents(".select-list").index() == 0) {
                c_type = $(this).children("a").text();
                switch ($(this).children("a").text()) {
                    case "全部":selectAll();
                    c_type=undefined;
                    break;
                }

            }
            if ($(this).parents(".select-list").index() == 1) {
                c_brand = $(this).children("a").text();
                switch ($(this).children("a").text()) {
                    case "全部":selectAll();
                        c_brand=undefined;
                        break;
                }
            }
            if ($(this).parents(".select-list").index() == 2) {
                switch ($(this).children("a").text()) {
                    case "10万以下":
                        c_min_price = 0, c_max_price = 10;
                        break;
                    case "10万-20万":
                        c_min_price = 10, c_max_price = 20;
                        break;
                    case "20万-50万":
                        c_min_price = 20, c_max_price = 50;
                        break;
                    case "50万-100万":
                        c_min_price = 50, c_max_price = 100;
                        break;
                    case "100万以上":
                        c_min_price = 100, c_max_price = 99999;
                        break;
                    case "全部":selectAll();
                        c_min_price=undefined;c_max_price=undefined;
                        break;
                }
            }
                $.ajax({
                    url: "../../car/selectAllByOther",
                    type: "post",
                    dataType: "json",
                    data: {
                        t_name: c_type,
                        b_name: c_brand,
                        c_min_price: c_min_price,
                        c_max_price: c_max_price

                    },
                    success: function (result) {
                        var html = "";

                        if (result.length==0){
                            html+="<label>暂时没有过滤数据</label>";
                        }

                        for (var i = 0; i < result.length; i++) {
                            html += "<div class=\"col-md-3\" style=\"margin-bottom: 25px\">\n" +
                                "    <div class=\"col-md-offset-2\">\n" +
                                "        <img class='gotoByCar' id='"+result[i].c_id+"' src=\\" + result[i].c_surface + " height=\"162\" width=\"216\">\n" +
                                "    </div>\n" +
                                "    <div class=\"col-md-offset-2\" style=\"font-family: '微软雅黑 Light'\">\n" +
                                "        <div style=\"font-size: large\">\n" +
                                "            <label>" + result[i].c_name + "</label><br>\n" +
                                "        </div>\n" +
                                "        <div class=\"row\" style=\"font-size: smaller\">\n" +
                                "            <div class=\"col-md-5\" style=\"color: cornflowerblue\">\n" +
                                "                <label>￥" + result[i].c_price + "万</label>\n" +
                                "            </div>\n" +
                                "            <div class=\"col-lg-push-5\" style=\"color: darkgrey\">\n" +
                                "                <label color=\"grey\">月供￥" + (result[i].c_price / 12).toFixed(2) + "万起</label>\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "\n" +
                                "    </div>\n" +
                                "</div>";
                        }
                        $("#com").html(html);

                    }
                })
            })
        })
})

</script>

</body>
</html>